<template>
    <div>
        <div class="header">
            <div class="left">
                <el-button-group>
                    <el-button type="primary" size="mini" @click="prev">&lt;</el-button>
                    <el-button type="primary" size="mini" @click="next">&gt;</el-button>
                </el-button-group>
                &nbsp;&nbsp;&nbsp;{{headerContent}}
            </div>
            <div text-align="center">{{options[Number(department)-1].label}}</div>
        </div>


        <div id="parent">
            <table class="week-table" cellspacing="0" cellpadding="0">
                <thead>
                    <th></th>
                    <th v-for="(header, index) in weekTableHeader" v-bind:key="index" :class="header.class">{{header.date}}</th>
                    <th>复制</th>
                    <th>粘贴</th>
                </thead>
                <tbody>
                    <!-- <el-checkbox-group v-model="checkList"> -->
                    <tr v-for="(worker, index) in workers" v-bind:key="index">
                        <td>
                            <div class="hours">
                                <!-- <el-checkbox :label="worker.name"></el-checkbox> -->
                                <span>{{worker.name}}</span>
                            </div>
                        </td>
                        <td v-for="(worktime,index) in worker.times" v-bind:key="index">
                            <!-- 						<el-tag :type="status(worktime)">{{fun(worktime)}}</el-tag>
 -->
                            <el-popover placement="top-start" title="" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" disabled>
                                <!-- <span slot="reference">{{date.day}}</span> -->
                                <template v-if="worktime!=''">
                                    <el-tag slot="reference" :type="status(worktime)">{{worktime}}</el-tag>
                                </template>
                                <!-- <el-tag type="success">aaa</el-tag> -->
                                <!-- <el-button @click="setWorkShiftInCalendar(date)">button</el-button> -->
                                <h3>更改班次</h3>
                                <el-select v-model="worker.times[index]" placeholder="请选择" >
                                    <el-option v-for="item in commonShift" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-popover>
                        </td>
                        <td>
                            <el-button type="primary" size="mini" @click="copy(worker.times)">复制</el-button>
                        </td>
                        <td>
                            <el-button type="primary" size="mini" @click="paste(index)">粘贴</el-button>
                        </td>

                    </tr>

                    </el-checkbox-group>

                </tbody>
            </table>

        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    import axios from "axios"
    export default {
        name: "workShiftShowMonth",
        props: {
            department: '',
			monthSave:{
				type:Boolean,
			},
			monthConfirm:{
				type:Boolean,
			}
        },
        data: function() {
            return {
                checkList: [],
                today: moment().format('YYYY-MM-DD'), //今日
                currentYearMonth: moment().format('YYYY-MM'), //当前月份
                weekTableHeader: [], //周表头
                dates: [], //日历日期
                showMonth: false, //按月?
                weekList: [], //点钟列表
                headerContent: moment().format('YYYY-MM'),
                currentWeekday: '',
                workers: [{ //当前部门员工 姓名 及 周工作时间
                        name: 'chen',
                        times: ["7-15", "7-15", "11-20", "11-20", "15-23", "15-23", "15-23"]
                    },
                    {
                        name: 'keven',
                        times: ["7-15", "11-20", "11-20", "7-15", "15-23", "15-23", "15-23"]
                    }, {
                        name: 'lu',
                        times: ["7-15", "15-23", "11-20", "7-15", "12-20", "15-23", "15-23"]
                    }
                ],
				options: [{
                    value: '1',
                    label: '技术部门'
                }, {
                    value: '2',
                    label: '管理部门'
                }, {
                    value: '3',
                    label: '财政部门'
                }, {
                    value: '4',
                    label: '销售部门'
                }, {
                    value: '5',
                    label: '后勤部门'
                }, ],
                copyContent: [],
                commonShift: [{
                    value: '7-15',
                    label: '早班'
                }, {
                    value: '11-20',
                    label: '午班'
                }, {
                    value: '15-23',
                    label: '晚班'
                }, {
                    value: '',
                    label: '其他'
                }, ],
				datatest:2222
            }
        },
        methods: {
            prev() {
                if (this.showMonth) {
                    this.currentYearMonth = moment(this.currentYearMonth).subtract(1, 'months').format('YYYY-MM')
                    this.headerContent = this.currentYearMonth
                    this.createCalendar()
                } else {
                    this.currentWeekday = moment(this.currentWeekday).subtract(7, 'days')
                    this.weekHeaderContent()
                    this.createWeekList()
                    this.getDepartmentWorkShift()
                }
            },
            next() {
                if (this.showMonth) {
                    this.currentYearMonth = moment(this.currentYearMonth).add(1, 'months').format('YYYY-MM')
                    this.headerContent = this.currentYearMonth
                    this.getDepartmentWorkShift()
                } else {
                    this.currentWeekday = moment(this.currentWeekday).add(7, 'days')
                    this.weekHeaderContent()
                    this.createWeekList()
                    this.getDepartmentWorkShift()
                }
            },
            dateMouseEnter(weekIndex, dateIndex) {
                this.dates[weekIndex][dateIndex].isAlive = 'date-alive'
            },
            dateMouseLeave(weekIndex, dateIndex) {
                this.dates[weekIndex][dateIndex].isAlive = ''
            },
            createWeekList() {
                this.weekTableHeader = ['Mon ', 'Tue ', 'Wed ', 'Thu ', 'Fri ', 'Sat ', 'Sun ']
                this.weekList = []
                for (let index = 0; index < 7; index++) {
                    let item = {}
                    item.date = moment(this.currentWeekday).add(index, 'days')
                    if (item.date.isSame(this.today, 'days')) {
                        item.class = 'today'
                    }
                    item.date = this.weekTableHeader[index] + item.date.format('MM/DD')
                    this.weekTableHeader[index] = item
                }
                for (let days = 0; days < 7; days++) {
                    this.weekList.push([])
                    // this.workingHours.push([])
                    let item = ''
                    for (let hours = 0; hours < 48; hours++) {
                        if (hours % 2 === 0) {
                            item = hours / 2 + '点'
                        } else {
                            item = ''
                        }
                        this.weekList[days].push(item)
                    }
                }

                // this.weekTableHeader.append("复制");
                // this.weekTableHeader.append("粘贴");
            },
            weekHeaderContent() {
                this.headerContent = moment(this.currentWeekday).format('MM/DD') + '~' + moment(this.currentWeekday).add(
                        6, 'days')
                    .format('MM/DD')
            },
            fun: function(data) {
                // console.log(data);
                data = data.split("-");
                return data[0] + ":00-" + data[1] + ":00";
            },
            open() {
                this.$message.success('已复制到剪切板');
            },
            copy: function(copytime) {
                for (let i = 0; i < copytime.length; i++) {
                    this.copyContent[i] = copytime[i]
                }
                this.open()

            },
            paste: function(index) {
                if (this.copyContent.length != 0) {
                    for (let i = 0; i < this.copyContent.length; i++) {
                        this.workers[index].times[i] = this.copyContent[i]
                    }
                    this.currentWeekday = moment(this.currentWeekday).add(0, 'days')
                    this.weekHeaderContent()
                    this.createWeekList()
                }
                console.log(this.workers[0].times)
                console.log(this.workers[1].times)
                console.log(this.workers[2].times)

            },
            status(time) {
                if (time === "7:00-15:00")
                    return "success"
                else if (time === '11:00-20:00')
                    return "warning"
                else if (time === "15:00-23:00")
                    return "danger"
                else return "info"
            },
            getDepartmentWorkShift() {
                var _this = this
                let start_time = moment(this.currentWeekday) //.format('YYYY-MM-DD')
                let _start_time = start_time.format('YYYY-MM-DD')
                let end_time = start_time.add(6, 'days') //.format('YYYY-MM-DD')
                let _end_time = end_time.format('YYYY-MM-DD')
				// console.log(this.currentWeekday.format("MM-DD"))
                // console.log("api/workshift/department/")
                axios.get("http://127.0.0.1:8000/api/workshift/department/", {
                    params: {
                        department_id: _this.department,
                        start_time: _start_time,
                        end_time: _end_time
                    }
                }).then(function(response) {
                     console.log(response);

                    _this.workers = []
                    let data = []
                    data = response.data.data
                    for (let i = 0; i < data.length; i++) {
                        let item = {}
                        item.name = data[i].name
                        item.times = []
                        for (let j = 0; j < 7; j++) {
                            item.times.push(data[i].data[j])
                        }
                        _this.workers.push(item)
                    }
                    // console.log(_this.workers);
                    // _this.createWeekList()
                }).catch(function(error) {
                    console.log(error);
                })
            },
            setDepartmentWorkShift: function() {
				var _this = this
				let start_time = moment(this.currentWeekday) //.format('YYYY-MM-DD')
				let _start_time = start_time.format('YYYY-MM-DD')
				let end_time = start_time.add(6, 'days') //.format('YYYY-MM-DD')
				let _end_time = end_time.format('YYYY-MM-DD')
				let dataToSend=[]
				// dataToSend=this.workers
				for(let i=0;i<this.workers.length;i++){
					dataToSend.push({})
					dataToSend[i].name=this.workers[i].name
					dataToSend[i].start_time=_start_time
					dataToSend[i].end_time=_end_time
					let datas=[]
					for(let j=0;j<this.workers[i].times.length;j++){
						datas[j]=this.workers[i].times[j]
					}
				    dataToSend[i].data=datas
					 // dataToSend[i].delete(times)
				}
					// console.log(dataToSend)
                axios.post("http://127.0.0.1:8000/api/workshift/department/application/", JSON.stringify(dataToSend))
                    .then(function(response) {
                        // console.log(response)
						_this.$message.success('保存成功');
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },
			getCommonShitf(){
				this.$emit('getCommonWork')
				console.log(this.commonShift)
			},
			
        },
		watch:{
			monthSave:function(){
				if (this.monthSave === true){
					console.log("monthSavemonthSavemonthSavemonthSave");
					this.setDepartmentWorkShift();
					this.$emit("monthSave2false");
				}
			},
			monthConfirm:function(){
				if(this.monthConfirm===true){
					console.log("monthConfirmmonthConfirmthis.monthSave = false;this.monthSave = false;");
					this.getDepartmentWorkShift();
					this.$emit("monthConfirm2false");
				}
			}
		},
        created() {
            //v-show是在创建后 保留dom 只是做切换的 不会v-if那样 销毁dom 所以只需要创建一次
            let weekday = moment().weekday() === 0 ? 7 : moment().weekday()
            // console.log("this is"+weekday)
            let daysDistance = 1 - weekday
            this.currentWeekday = moment().add(daysDistance, 'days')
            this.createWeekList()
            this.getDepartmentWorkShift()
			// this.getCommonShitf()
			// this.setDepartmentWorkShift()
			
        }
    }
</script>

<style>
    #parent {
        margin: 2rem auto;
        padding: 1rem;
        border: 1px solid #ebeef5;
    }

    .week-table tbody tr td {
        border: 1px solid #ebeef5;
    }

    /* .hours {
		text-align: center;
		height: 24px;
	} */
</style>
